<template>
	<view class="rows padding30 top">
		<view class="rows m-bot50" v-for="(item,index) in pageData" :key="index">
			<view class="Opt white h7 bgffb" v-if="item.q_type == 1">单选题</view>
			<view class="Opt white h7 bg43" v-if="item.q_type == 2">多选题</view>
			<view class="color_33 size30 m-top10">{{item.item_title}}</view>
			<view class="rows padding20">
				<view class="list " 
				      :class="{'correct':subItem.correct == 1,'mistake':subItem.selection == 1}" 
				      v-for="(subItem,subIndex) in item.answerList" :key="subIndex">
					<view class="dots flexac"> <view class="dot"></view> </view>
					<text class="flex-1 color_33 size30 m-left14 bold500">{{subItem.data_title}}</text>
					<text class="size26 color_f3 m-left10 m-top4" v-if="subItem.correct == 1 && subItem.selection == 0">正确</text> 
					<text class="size26 color_3b" v-if="subItem.selection == 1 && subItem.correct == 0">错误</text>
					<text class="size26 color_f3" v-if="subItem.selection == 1 && subItem.correct == 1">你的选择</text>
				</view>
			</view>
			
			<!-- <view class="explain d-flex j-sb a-center">
				<view class="d-flex a-center color_33 size34">
					<text>正确答案:</text>
					<text class="bold m-left14">A</text>
				</view>
				<view class="d-flex a-center color_33 size34">
					<text>已选答案:</text>
					<text class="bold m-left14">B</text>
				</view>
			</view> -->
			
		</view>
		
		
		<!-- 
		<view class="rows m-bot50">
			<view class="Opt white h7 bgffb">单选题</view>
			<view class="Opt white h7 bg43">多选题</view>
			<view class="color_33 size30 m-top10">8.为了深化国家监察体制改革,加强对_的监督，实现国家监察全面覆盖深入开展反腐败工作，推进国家治理体系和治理能力现代化，根据宪法，制定《中华人民共和国监察法》。</view>
			<view class="rows padding20">
				<view class="list correct">
					<view class="dots flexac"> <view class="dot"></view> </view>
					<text class="flex-1 color_33 size30 m-left14 bold500">A.全体党员</text>
					<text class="size26 color_f3 m-left10 m-top4">正确</text> 
					
				</view>
				<view class="list mistake">
					<view class="dots flexac"> <view class="dot"></view> </view>
					<text class="flex-1 color_33 size30 m-left14 bold500">B.公务员</text>
				
					<text class="size26 color_3b m-left10 m-top4">错误</text> 
				</view>
				<view class="list">
					<view class="dots flexac"> <view class="dot"></view> </view>
					<text class="flex-1 color_33 size30 m-left14 bold500">C.领导干部</text>
				</view>
				<view class="list">
					<view class="dots flexac"> <view class="dot"></view> </view>
					<text class="flex-1 color_33 size30 m-left14 bold500">D.所有行使公权力的公职人员所有行使公权力的公职人员</text>
				</view>
			</view>
			
			<view class="explain d-flex j-sb a-center">
				<view class="d-flex a-center color_33 size34">
					<text>正确答案:</text>
					<text class="bold m-left14">A</text>
				</view>
				<view class="d-flex a-center color_33 size34">
					<text>已选答案:</text>
					<text class="bold m-left14">B</text>
				</view>
			
			</view>
			
		</view> -->
		
	</view>
</template>
<!-- correct 正确的答案    selection 选择的 -->
<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				act_id:'',
				pageData:[],
			}
		},
		onLoad(opt) {
			if(opt.act_id) this.act_id = opt.act_id;
			this.wrongAnswe();
		},
		methods: {
			wrongAnswe(){
				this.$showLoading();
				this.$http.post({
					url:'/SRA_Standup2021/wrongAnswer',
					data:{
						act_id:this.act_id,
						token: this.bid
					}
				}).then(res=>{
					this.$hideLoading();
					if(!res.success) return this.$Toast(res.data,2);
					this.pageData = res.data || [];
				})
			}
		},
		computed: {
			...mapState(['bid']),
		},
	}
</script>

<style lang="scss" scoped>
 .Opt{
 	padding:4rpx 14rpx;
 	border-radius: 10rpx;
 	display: inline;
 }
 .bgffb{
 	background-color: #FFB346;
 }
 .bg43{
 	background-color: #43A0FF;
 }
 .list{
	 width:100%;
	 padding:14rpx;
	 display: flex;
	 margin-bottom: 20rpx;
 }
 .dots{
 	width: 32rpx;
 	height: 32rpx;
 	border:1px solid #E94356;
 	border-radius: 50%;
 	overflow: hidden;
 	margin-top:4rpx;
 }
 .dot{
 	width:20rpx;
 	height: 20rpx;
 	background-color: #ffffff;
 	border-radius: 50%;
 	overflow: hidden;
 }
 .color_f3{
	 color:#F34155
 }
 .color_3b{
	 color:#3B5FDC;
 }
 .correct{
	 background-color: #FFEBEB;
 }
 .correct .dot{
	 background-color: #E94356;
 }
 .mistake{
	 background-color: #F6F8FF;
 }
.mistake .dots{
	  border:1px solid #3B5FDC;
  }
 .mistake .dot{
 	 background-color: #3B5FDC;
 }
 .explain{
	 width:600rpx;
	 margin:0 auto;
	 height: 89rpx;
	 border:1px solid #F34343;
	 border-radius: 6rpx;
	 overflow: hidden;
	 padding:0 20rpx;
 }
</style>
